<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="create_time"
        label="日期"
      >
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="姓名"
      >
      </el-table-column>

      <el-table-column
        label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" style="width: 60px;height: 60px;">
        </template>
      </el-table-column>

      <el-table-column
        label="性别">
        <template slot-scope="scope">
          <div v-if="scope.row.sex">男</div>
          <div v-else>女</div>
        </template>
      </el-table-column>

      <el-table-column

        label="地址">
        <template slot-scope="scope">
          {{scope.row.country}} {{scope.row.province}} {{scope.row.city}}
        </template>

      </el-table-column>
    </el-table>

    <el-pagination class="pagination-style" @current-change="handleCurrentChange" :current-page="currentPage"
                   :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'user',
    data() {
      return {
        // 分页参数
        pageSize: 20,
        pageNum: 1,
        currentPage: 1,
        total: 0,
        tableData: []
      }
    },
    created() {
      this.fetchData(this.pageNum)
    },
    methods: {
      fetchData(pageNum) {
        this.$http.post('user/list', {page: pageNum, pageSize: this.pageSize}).then(data => {
          console.log(data)
          if (data && data.data && data.data.data) {
            this.total = data.data.data.total
            this.tableData = data.data.data.data
          }
        })
      },
      //page
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData(this.currentPage)
      },
    }
  }
</script>

<style scoped>
  .pagination-style {
    text-align: right;
    margin-top: 18px;
  }

  .line {
    text-align: center;
  }
</style>

